@import '../../ui/base';
.root
  background-color #fff
  padding-top 25px
  box-shadow 0px 0px 6px rgba(0, 0, 0, .2)
  width 282px
  right -13px
  z-index 13
  margin-top 10px
  &:after, &:before
    bottom 100%
    right 33px
    border solid transparent
    content " "
    height 10px
    width 10px
    position absolute
    pointer-events none
  &:after
    border-color rgba(255, 255, 255, 0)
    border-bottom-color #ffffff
    border-width 8px
    margin-left -8px
    right 34px
  &:before
    border-color rgba(194, 225, 245, 0)
    border-bottom-color #ccc
    border-width 9px
    margin-left -9px

.input-block
  padding 0 15px
  > div
    font-size 12px
    color #7793B2
    margin-top 10px

.input-progress
  > span:last-child
    letter-spacing 1px
    margin-left 5px

.input-actions
  display flex
  justify-content flex-end
  margin-bottom 10px
  > span
  button
    display inline-block
    width 54px
    height 22px
    line-height 22px
    text-align center

.objective-detail
  .comments
    @extends $slide-in-left

.comments
  max-height 200px
  overflow auto
  position relative
  hr
    margin 10px 0
    background-color #EEF2F6
    height 1px
  > li
    padding 10px 15px 5px 15px
    border-top 1px solid #eef2f6
    transition background-color .2s
  .note
    margin-top 12px
    margin-bottom 9px
    .input
      width 100%
      height 80px
    .edit-actions
      display flex
      margin-top 20px
      margin-bottom 20px
      align-items center
      justify-content flex-end
      span
      button
        width 80px
        height 30px
        text-align center
        line-height 30px
        display inline-block
      span
        color #A9BCCD
  .okr-logs
    margin-top -7px
    > div + div
      margin-top -10px
    color #8B919C
    .okr-logs-content
      margin-top 12px
      font-size 12px
      color #8B919C
      label
      span
        display inline
      .arrow
        display inline-block
        transform translateY(2px)
  .okr-logs-title
    margin-top 13px
    clear fix
    i
      color #8B919C
      float left
    > span
      margin-left 10px
      color #8B919C
      word-break break-all
      float left
      max-width 215px
  .user
    display flex
    align-items center
    > div
      height 36px
      display flex
      flex-direction column
      justify-content space-between
      margin-left 10px
      p
        line-height 1

.comment-actions-menu
  position absolute
  right 26px
  top 9px
  &.small
    top -10px
    right 7px

.comment-actions
  right 0
  background-color #fff
  box-shadow 0px 1px 6px rgba(0,0,0,.2)
  width 70px
  z-index 10
  border-radius 3px
  padding 5px 0
  margin-top -20px
  li
    > span
      color #7793B2
      display inline-block
      width 100%
    font-size 12px
    text-align center
    transition background-color .2s
    &:hover
      background-color #e2ebf4

.fetch-more
  background-color #F7F9FD
  border none
  color #7793B2
  &:hover
    border none
    background-color #F7F9FD
    color rgba(119, 147, 178, .7)

.objective-detail
  .okr-logs-title
    > span
      max-width 600px
.comment-li
  position relative
  &:hover
    .alert-edit
      opacity 1
.alert-edit
  position absolute
  width 70px
  top 10px
  right 10px
  font-size 12px
  transition .2s
  opacity 0
  line-height 20px
  color #b1c3d6
  >div 
    display inline-block
    vertical-align top
.alert-link 
  cursor pointer 
  margin-right 5px
